<template>
  <el-scrollbar height="650px">
  <div style="display: flex;">
    <div style="width: 16%;">
      <div style="text-align: center;padding:15px 30px;">人员组织</div>
      <div style="padding: 1px 10px 0px 10px">
        <el-input
            v-model="input2"
            @input="sou()"
            placeholder="请输入工号"
        />
        <el-scrollbar height="640px">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            collapse-transition
        >
          <el-menu-item v-model="p.empCard" @click="getAll2(p.empCard)" :index="p.empCard" v-for="(p,index) in person.value">
            {{p.empCard}}-{{p.empName}}
          </el-menu-item>
          <p style="font-size: 14px;color: #A8ABB2;text-align: center" v-if="person.value==null">无数据</p>
        </el-menu>
        </el-scrollbar>
      </div>
    </div>

    <div style="width: 84%;">
      <div>
        <el-tabs v-model="activeName" class="demo-tabs">
          <el-tab-pane label="考勤统计" name="floor">
            <el-card>
              <div class="el-calendar__header">
                <span>{{str}}</span>
                <div class="el-button-group">
                  <button @click="selectDateUp();selectDate('prev-month')" class="el-button el-button--small" aria-disabled="false" type="button">
                    <span class=""> 上个月 </span>
                  </button>
                  <button @click="selectDate1();selectDate('today')" class="el-button el-button--small" type="button">
                    <span class="">今天</span>
                  </button>
<!--                  <button @click="selectDateDown();selectDate('next-month')" class="el-button el-button&#45;&#45;small" aria-disabled="false" type="button">-->
<!--                    <span class=""> 下个月 </span></button>-->
                </div>
              </div>
              <div style="display: flex;margin: 20px 10px 10px 25px;height: 400px;border: 1px solid #1a1a1a">
                <div style="width:25%;border-right: 1px solid #1a1a1a">
                  <div class="biao">出勤记录</div>
                  <div style="width: 249px;height: 260px;" id="container" ref="chart"></div>
                  <div class="handsome">
                    <div class="tian">{{sjatten}}<br>应出勤天数</div>
                    <div class="tian">{{attendanceDays}}<br>实际出勤天数</div>
                  </div>
                </div>
                <div style="width:75%;">
                  <div class="biao">考勤汇总</div>
                  <div style="display: flex">
                    <div>
                      <div class="jia">
                        <div style="width:200px;display: flex;">
                          <div>
                            <svg class="icon" viewBox="0 0 1024 1024" width="60" height="100"><path d="M583.1 587.1l144.1 266.2 40.8-44-33.6-354.2z" fill="#5CA8FF" p-id="2649"></path><path d="M882.4 174.5l-28.3-28.4s-51.9-16.6-87.2 18.9c-61.3 61.5-143.8 146.7-143.8 146.7l-400.7-59.1-49.5 47.3 297 172.7L361.4 579l-183.9 11.8-35.4 11.8 186.2 104.1 99 189.3 14.1-35.5 11.8-175.1s306.4-314.6 429-437.7c30.8-25.9 0.2-73.2 0.2-73.2z" fill="#5CA8FF" p-id="2650"></path></svg>
                          </div>
                          <div class="zi">出差天数：{{tripDaynum}}</div>
                        </div>
                        <div style="width:200px;display: flex">
                          <div>
                            <svg t="1664113382223" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3783" width="60" height="100"><path d="M895.474909 127.041728H125.379339c-49.356985 0-89.513284 40.156299-89.513284 89.513284v453.950636c0 49.356985 40.156299 89.513284 89.513284 89.513284h253.290624a88.921857 88.921857 0 0 0-12.042733 44.756642v5.760819c0 16.297811 4.398939 31.579008 12.042733 44.756642H274.55962a22.378321 22.378321 0 1 0 0 44.756642h471.738204a22.378321 22.378321 0 1 0 0-44.756642h-104.110343a88.921857 88.921857 0 0 0 12.042733-44.756642v-5.760819c0-16.297811-4.398939-31.579008-12.042733-44.756642h253.290625c49.356985 0 89.513284-40.156299 89.513284-89.513284V216.555012c-0.003197-49.360182-40.156299-89.513284-89.516481-89.513284z m-770.09557 44.756642h770.098767c24.680091 0 44.756642 20.076551 44.756642 44.756642v380.715982H80.622697V216.555012c0-24.680091 20.076551-44.756642 44.756642-44.756642z m484.094233 632.977204v5.760819c0 24.680091-20.076551 44.756642-44.756642 44.756642h-108.576416c-24.680091 0-44.756642-20.076551-44.756642-44.756642v-5.760819c0-24.680091 20.076551-44.756642 44.756642-44.756642h108.576416c24.676894 0 44.756642 20.076551 44.756642 44.756642z m286.001337-89.513284H125.379339c-24.680091 0-44.756642-20.076551-44.756642-44.756642v-28.478012h859.612051v28.478012c-0.003197 24.680091-20.079748 44.756642-44.759839 44.756642z" fill="#1afa29" p-id="3784"></path></svg>
                          </div>
                          <div class="zi">请假天数：{{holiDaynum}}</div>
                        </div>
                        <div style="width:200px;display: flex">
                          <div>
                            <svg t="1664113893677" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4911" width="60" height="100"><path d="M660.503304 63.066217c-96.886173 0-188.055994 47.362887-243.857744 126.701713l-16.138481 22.90841 45.817845 32.222695 16.110835-22.90841c45.351977-64.431056 119.398339-102.904571 198.067545-102.904571 133.430688 0 241.997344 108.553346 241.997344 241.998369S793.935015 603.096101 660.503304 603.096101h-28.010431v56.020862h28.010431c164.340762 0 298.018206-133.690755 298.018206-298.031517 0-164.327451-133.677444-298.01923-298.018206-298.019229z" fill="#f4ea2a" p-id="4912"></path><path d="M658.588638 201.886637c-15.48217 0-28.010431 12.541571-28.010431 28.010431v146.943926c0 15.468859 12.528261 28.010431 28.010431 28.010431 0.334811 0 0.666549-0.013311 0.998288-0.025597 0.331739 0.011263 0.663478 0.025597 0.998288 0.025597h129.026957c15.48217 0 28.010431-12.541571 28.010431-28.010431 0-15.468859-12.528261-28.010431-28.010431-28.010431h-103.013102V229.896044c0-15.467836-12.528261-28.009407-28.010431-28.009407zM708.618747 814.020574l-203.100965-101.509015 60.670325-88.283489a28.063673 28.063673 0 0 0 4.923864-15.865103V464.358616c0-95.040108-76.152495-169.497048-173.367334-169.497048-97.187195 0-173.33969 74.456941-173.33969 169.497048v144.003327a28.076983 28.076983 0 0 0 5.169597 16.234726l62.365879 87.695778-211.950406 101.522326a28.000192 28.000192 0 0 0-15.906058 25.261298v91.402243c0 15.468859 12.541571 28.010431 28.01043 28.010431h603.996097c15.48217 0 28.010431-12.541571 28.010431-28.010431v-91.402243a28.005311 28.005311 0 0 0-15.48217-25.055497z m-40.538692 88.44731H120.10482V856.71864l226.050331-108.278945a27.911114 27.911114 0 0 0 15.017326-18.244613 27.908042 27.908042 0 0 0-4.294175-23.250388l-76.453518-107.527413V464.358616c0-63.638568 51.534196-113.476187 117.319853-113.476187 65.813301 0 117.347497 49.838642 117.347497 113.476187v135.304398L441.100037 707.313293a28.000192 28.000192 0 0 0-4.048443 22.867455c2.051866 7.850129 7.35764 14.429616 14.606748 18.053146L668.080055 856.390996v46.076888z" fill="#f4ea2a" p-id="4913"></path></svg>
                          </div>
                          <div class="zi">加班：{{overDaynum}}</div>
                        </div>
                      </div>
                      <div>
                        <div style="margin: 0px 18px">
                          <svg t="1664115447701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6344" width="30" height="25"><path d="M928 960.2H98c-17.7 0-32-14.3-32-32V159c0-17.7 14.3-32 32-32h93c17.7 0 32 14.3 32 32s-14.3 32-32 32h-61v705.2h766V191h-67.5c-17.7 0-32-14.3-32-32s14.3-32 32-32H928c17.7 0 32 14.3 32 32v769.2c0 17.7-14.3 32-32 32z" fill="" p-id="6345"></path><path d="M576.1 190.8h-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h128c17.7 0 32 14.3 32 32s-14.3 32-32 32zM319 256c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32s32 14.3 32 32v128c0 17.6-14.3 32-32 32zM703.3 256c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32s32 14.3 32 32v128c0 17.6-14.3 32-32 32zM510.7 830c-76.1 0-147.6-29.6-201.4-83.4s-83.4-125.3-83.4-201.4 29.6-147.6 83.4-201.4c53.8-53.8 125.3-83.4 201.4-83.4s147.6 29.6 201.4 83.4c53.8 53.8 83.4 125.3 83.4 201.4s-29.6 147.6-83.4 201.4C658.3 800.4 586.8 830 510.7 830z m0-505.7c-121.8 0-220.9 99.1-220.9 220.9 0 121.8 99.1 220.9 220.9 220.9 121.8 0 220.9-99.1 220.9-220.9-0.1-121.8-99.1-220.9-220.9-220.9z" fill="" p-id="6346"></path><path d="M512.7 608.1c-17.7 0-32-14.3-32-32V416.2c0-17.7 14.3-32 32-32s32 14.3 32 32V576c0 17.7-14.4 32.1-32 32.1z" fill="" p-id="6347"></path><path d="M653.1 608.1H513.8c-17.7 0-32-14.3-32-32s14.3-32 32-32h139.3c17.7 0 32 14.3 32 32s-14.3 32-32 32z" fill="" p-id="6348"></path></svg>
                          补卡信息</div>
                        <div style="margin: 0px 10px;height: 130px;">
                          <el-table :data="tableData" height="130" style="width: 100%">
                          <el-table-column align="center" prop="rcTime" label="补卡日期">
                            <template #default="props">
                              {{props.row.rcTime.slice(0,10)}}
                            </template>
                          </el-table-column>
                            <el-table-column align="center" prop="rcAttendanceTypeId" label="补卡类型" />
                            <el-table-column align="center" prop="rcState" label="状态">
                              <template #default="props">
                                <span v-if="props.row.rcState==1">申请成功</span>
                                <span v-if="props.row.rcState==0">审批中</span>
                                <span v-if="props.row.rcState==2">审批失败</span>
                              </template>
                            </el-table-column>
                          </el-table>
                        </div>
                      </div>
                    </div>
                    <div class="cc">
                      <div>{{lateNum}}迟到</div>
                      <div>{{bigLateNum}}严重迟到</div>
                      <div>{{earlyNum}}早退</div>
                      <div>{{bigEarlyNum}}严重早退</div>
                      <div>{{kg}}旷工</div>
                      <div>{{qk}}缺卡</div>
                    </div>
                  </div>
                </div>
              </div>
              <div style="display: flex">
                <template v-for="i in holiDayType">
                  <div style="margin: 20px;width: 350px;border: 1px #DDDDDD solid;">
                    <div class="hotitle">{{i.holidayTypeName}}</div>
                    <div class="you">
                      <div>年假额度</div>
                      <div class="hodivvcount">{{i.holedayNum}}天</div>
                    </div>
                    <div class="you">
                      <div>年假剩余额度</div>
                      <div class="hodivvcount">{{i.lostholedayNum}}天</div>
                    </div>
                  </div>
                </template>
              </div>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="考勤日历" name="floor1">
            <el-card>
              <el-calendar ref="calendar">
                <template #header="{ date }">
                  <span>{{ str }}</span>
                  <el-button-group>
                    <div class="icondiv">
                      <div>
                        <svg t="1670071464365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2714" width="18" height="20"><path d="M512 0C228.894118 0 0 228.894118 0 512s228.894118 512 512 512 512-228.894118 512-512S795.105882 0 512 0z m252.988235 355.388235L445.741176 671.623529c-6.023529 6.023529-15.058824 9.035294-21.082352 9.035295s-15.058824-3.011765-21.082353-9.035295l-144.564706-144.564705c-12.047059-12.047059-12.047059-30.117647 0-42.164706 12.047059-12.047059 30.117647-12.047059 42.164706 0l123.482353 123.482353 298.164705-298.164706c12.047059-12.047059 30.117647-12.047059 42.164706 0s12.047059 33.129412 0 45.17647z" p-id="2715" fill="#1AFA29"></path></svg>                      </div>
                      <div>
                        正常
                      </div>
                    </div>
                    <div class="icondiv">
                      <div>
                        <svg t="1664354182033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2993" width="20" height="22"><path d="M511.7952 88.1664c-253.3376 0-459.008 205.6704-459.008 459.008s205.6704 459.008 459.008 459.008 459.008-205.6704 459.008-459.008c0-254.1568-205.6704-459.008-459.008-459.008z m115.1488 544.5632H483.84c-31.2832 0-57.6-25.4976-57.6-57.6l41.0112-224.8192c0-31.2832 25.4976-57.6 57.6-57.6s57.6 25.4976 57.6 57.6l-30.1568 167.2704h74.7008c31.2832 0 57.6 25.4976 57.6 57.6-0.8704 31.232-26.368 57.5488-57.6512 57.5488z" p-id="2994" fill="#f4ea2a"></path><path d="M311.0912 59.392s-116.7872-92.1088-229.4784 0-28.7744 229.4784-28.7744 229.4784C135.0656 134.2464 311.0912 59.392 311.0912 59.392zM942.0288 59.392c-112.6912-92.1088-229.4784 0-229.4784 0s176.8448 74.8544 258.304 228.6592c-0.0512 0 83.8656-136.5504-28.8256-228.6592zM942.0288 59.392z" p-id="2995" fill="#f4ea2a"></path></svg>                      </div>
                      <div>
                        迟到
                      </div>
                    </div>
                    <div class="icondiv">
                        <div>
                          <svg t="1670075023692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3041" width="20" height="20"><path d="M996.7104 909.5168V177.7664c0-57.6512-48.3328-104.5504-107.7248-104.5504h-64.0512v-10.1888c0-10.2912-15.6672-18.6368-35.072-18.6368-19.3536 0-35.072 8.3456-35.072 18.6368V73.216H222.7712v-10.1888c0-10.2912-15.7184-18.6368-35.072-18.6368s-35.072 8.3456-35.072 18.6368V73.216h-17.8688c-59.392 0-107.6736 46.8992-107.6736 103.424v731.7504c0 58.7264 48.3328 105.6256 107.7248 105.6256h754.176c59.4432 0.0512 107.776-46.848 107.7248-104.4992z m-304.4352-150.016c14.336 14.336 14.336 37.7856 0 52.0704-14.336 14.336-37.7856 14.336-52.0704 0l-128.256-128.256-128.256 128.256c-14.336 14.336-37.7856 14.336-52.0704 0-14.336-14.336-14.336-37.7856 0-52.0704l128.256-128.256-128.256-128.2048c-14.336-14.336-14.336-37.7856 0-52.0704 14.336-14.336 37.7856-14.336 52.0704 0l128.256 128.256 128.256-128.256c14.336-14.336 37.7856-14.336 52.0704 0 14.336 14.336 14.336 37.7856 0 52.0704L564.0192 631.296l128.256 128.2048z m222.5664-502.6816h-805.888v-50.6368h805.888v50.6368z" p-id="3042" fill="#d81e06"></path></svg>
                        </div>
                      <div>
                        旷工
                      </div>
                    </div>
                    <div class="icondiv">
                        <div>
                          <svg t="1670967479026" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2667" width="25" height="24"><path d="M0 0h1024v1024H0z" fill="#FFFFFF" p-id="2668"></path><path d="M765.668 209.468h0.132c70.8 0 128.2 57.4 128.2 128.2H124c0-70.8 57.4-128.2 128.2-128.2h0.132v-21.3c0-35.44 28.728-64.168 64.168-64.168 35.44 0 64.168 28.728 64.168 64.168v21.3h256.664v-21.3c0-35.44 28.728-64.168 64.168-64.168 35.44 0 64.168 28.728 64.168 64.168v21.3zM613.68 423.136c-83.516 48.408-139.68 138.704-139.68 242.104 0 94.048 46.464 177.256 117.712 227.96h-296.6C200.608 893.2 124 816.596 124 722.096v-298.96h489.68z" fill="#ED5D4A" p-id="2669"></path><path d="M754 875.02c-115.98 0-210-93.92-210-209.78s94.02-209.784 210-209.784 210 93.92 210 209.784c0 115.86-94.02 209.78-210 209.78z m-30-239.748h-45.032a29.968 29.968 0 1 0 0 59.936H724v44.92a30 30 0 0 0 60 0v-44.92h45.032a29.968 29.968 0 0 0 0-59.936H784v-44.924a30 30 0 1 0-60 0v44.92z" fill="#F28D80" p-id="2670"></path></svg>
                          </div>
                        <div>补卡</div>
                    </div>
                    <div class="icondiv">
                      <div>
                        <svg t="1666573406465" class="icon" viewBox="0 0 1122 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2643" width="20" height="20"><path d="M112.219178 126.246575h897.753425c61.720548 0 112.219178 50.49863 112.219178 112.219178v673.315069c0 61.720548-50.49863 112.219178-112.219178 112.219178H112.219178c-61.720548 0-112.219178-50.49863-112.219178-112.219178V238.465753c0-61.720548 50.49863-112.219178 112.219178-112.219178z" fill="#2F77F1" p-id="2644"></path><path d="M771.506849 252.493151c-15.430137 0-28.054795-12.624658-28.054794-28.054795V28.054795c0-15.430137 12.624658-28.054795 28.054794-28.054795s28.054795 12.624658 28.054795 28.054795v196.383561c0 15.430137-12.624658 28.054795-28.054795 28.054795z m5.610959 218.827397c11.221918 11.221918 11.221918 29.457534 0 39.276712l-252.49315 252.493151c-2.805479 2.805479-5.610959 4.208219-9.819179 5.610959-11.221918 4.208219-22.443836 2.805479-30.860274-5.610959l-140.273972-140.273973c-11.221918-11.221918-11.221918-29.457534 0-39.276712 11.221918-11.221918 28.054795-11.221918 39.276712 0l120.635617 120.635616 232.854794-232.854794c12.624658-11.221918 29.457534-11.221918 40.679452 0zM350.684932 252.493151c-15.430137 0-28.054795-12.624658-28.054795-28.054795V28.054795c0-15.430137 12.624658-28.054795 28.054795-28.054795s28.054795 12.624658 28.054794 28.054795v196.383561c0 15.430137-12.624658 28.054795-28.054794 28.054795z" fill="#AFFCFE" p-id="2645"></path></svg></div>
                        <div>
                        下班漏签
                      </div>
                    </div>
                    <div class="icondiv">
                      <div>
                        <svg t="1664354429260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5779" width="20" height="20"><path d="M376.6784 726.4768c0-33.4848 5.2224-65.792 15.104-96.1536 9.8816-30.8736 24.4224-58.7776 42.1888-84.48 18.3808-25.8048 39.5264-48.3328 64.5632-68.2496 24.32-20.0704 52.0704-35.584 81.7152-47.6672 2.048-4.5568 3.2768-9.0624 6.0416-16.2304l4.5056-12.3392c0.6656-3.84 2.048-7.68 3.2768-10.8544 6.0416-2.048 11.264-5.2224 16.3328-9.7792 4.5568-3.84 8.4992-9.728 12.4928-16.7424 3.2768-7.1168 6.0416-17.4592 7.2704-29.6448 0.6656-9.0624 0.6656-16.7424-0.6656-23.1936-1.9456-6.4512-3.2768-11.52-6.0416-15.5136-2.6112-4.5568-6.0416-8.3968-9.8816-11.008 0-23.9104-2.048-47.104-4.5056-69.632-3.2768-20.0704-7.8336-41.216-15.104-63.1808-6.6048-21.9648-17.8688-42.5984-32.9728-60.5696-6.6048-7.68-15.7696-16.2304-26.9312-23.9104-11.264-7.68-24.32-14.848-38.7072-21.2992-14.5408-5.7856-30.208-10.9568-46.6944-14.848-16.3328-3.84-32.9728-5.888-49.9712-5.888-13.1584 0-26.9312 1.2288-41.472 3.2768-14.5408 1.9456-28.9792 5.7856-43.52 11.52-14.5408 5.7856-28.9792 14.1312-42.1376 23.9104-13.2096 9.728-25.7024 22.6816-37.4784 38.7072-11.8272 16.7424-21.1456 35.584-26.9312 56.7296-6.0416 21.2992-9.8816 41.216-12.4928 59.3408-2.048 21.9648-3.2768 43.264-3.2768 65.0752-5.2224 5.888-8.4992 11.52-11.264 17.9712-2.6112 6.4512-4.5568 13.568-5.2224 21.2992-0.6656 7.68 0.6656 16.7424 3.2768 26.5216 2.6112 10.2912 6.6048 17.4592 10.5984 22.6816 3.9936 5.2224 7.8336 9.728 11.264 12.3392 4.5568 2.6112 8.4992 4.5056 12.4928 5.888 2.6112 9.0624 6.0416 17.9712 8.4992 26.5216 2.6112 7.68 6.0416 14.848 9.8816 21.9648 3.2768 7.1168 7.8336 12.9024 12.4928 16.7424 9.8816 8.3968 19.0976 16.2304 26.9312 23.9104 7.8336 7.68 12.4928 18.7904 13.8752 31.5904 0.6656 9.7792 0.6656 17.4592 0.6656 25.1392 0 7.168-2.048 14.1312-4.5568 21.2992-3.2768 7.168-7.8336 14.1312-14.5408 21.2992-6.7072 7.1168-15.7696 14.1312-28.416 21.9648-9.8816 6.4512-21.7088 11.52-34.2016 16.1792-12.4928 4.5568-25.7024 8.3968-38.8608 12.3392-13.8752 3.84-26.9312 7.68-39.5776 11.52-12.4928 4.5568-24.32 9.728-34.8672 16.2304-10.5984 7.168-19.7632 14.848-26.9312 23.9104-7.2704 9.0624-11.8272 20.5824-14.5408 34.7648-6.0416 37.376-7.2704 67.6864-3.9936 91.4432 3.2768 23.9104 7.8336 38.0416 14.5408 42.5984 3.9936 2.6112 12.4928 5.888 25.7024 8.3968 13.2096 2.6112 29.6448 5.888 48.7424 8.3968 19.7632 3.2768 40.8064 5.888 64.5632 8.3968 23.6032 2.6112 47.5136 5.2224 71.1168 7.168 24.4224 1.9456 47.5136 3.1744 69.888 4.4032 22.3744 1.2288 42.1888 2.048 59.3408 2.048h23.1936c-13.8752-23.9104-25.1392-49.7152-32.9728-76.7488-7.8336-27.4432-11.8272-55.8592-11.8272-85.5552z m0 0" p-id="5780" fill="#d4237a"></path><path d="M959.3856 623.36c-14.5408-32.9728-34.2016-61.2352-59.3408-86.3744-24.9856-24.4224-53.9648-43.8272-87.5008-57.9584-33.6384-14.1312-69.0688-21.2992-107.4176-21.2992-38.1952 0-74.4448 7.1168-107.9296 21.2992-33.6384 14.1312-62.6176 33.4848-87.5008 57.9584-24.9856 24.4224-44.7488 53.5552-59.3408 86.3744-14.5408 32.9728-21.7088 67.6864-21.7088 105.0624s7.2704 72.2432 21.7088 105.0624c14.5408 32.9728 34.2016 61.2352 59.3408 86.3744 24.9856 24.4224 53.9648 43.8272 87.5008 57.9584 33.6384 14.1312 69.888 21.2992 107.9296 21.2992 38.0416 0 73.728-7.1168 107.4176-21.2992 33.6384-14.1312 62.6176-33.4848 87.5008-57.9584 25.1392-24.4224 44.7488-53.5552 59.3408-86.3744 14.5408-32.9728 21.7088-67.6864 21.7088-105.0624 0-37.2224-7.2704-72.0896-21.7088-105.0624z m-178.4832 224.8192c-10.5984 0-21.1456-4.096-29.1328-12.0832l-82.1248-82.432c-7.424-7.2704-12.0832-17.7152-12.0832-28.9792v-164.4032c0-22.784 18.3808-41.0624 41.0624-41.0624 22.6816 0 41.0624 18.3808 41.0624 41.0624v147.5072l70.1952 70.1952c16.0768 16.0768 16.0768 42.0352 0 58.112-7.9872 7.936-18.432 12.0832-28.9792 12.0832z m0 0" p-id="5781" fill="#d4237a"></path></svg>                      </div>
                      <div>
                        请假
                      </div>
                    </div>
                    <div class="icondiv">
                      <div>
                        <svg t="1664354509001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6839" width="20" height="25"><path d="M201.728 776.192c0-20.138667 16.384-36.522667 36.522667-36.522667h547.84c20.138667 0 36.522667 16.384 36.522666 36.181334 0 20.138667-16.384 36.522667-36.522666 36.522666H238.250667c-20.138667 0-36.522667-16.384-36.522667-36.181333z" fill="#635DF7" opacity=".7" p-id="6840"></path><path d="M201.728 776.192c0-20.138667 16.384-36.522667 36.522667-36.522667h547.84c20.138667 0 36.522667 16.384 36.522666 36.181334 0 20.138667-16.384 36.522667-36.522666 36.522666H238.250667c-20.138667 0-36.522667-16.384-36.522667-36.181333zM944.128 425.301333c9.216 14.677333 2.730667 35.157333-12.629333 39.936L279.210667 680.96c-26.624 8.874667-55.296 1.024-74.752-20.138667l-123.221334-132.096c-10.922667-11.605333-3.754667-32.085333 11.264-32.768l19.797334-1.024c10.24-0.341333 20.821333 2.048 29.696 7.168L221.866667 547.84c16.725333 9.557333 36.864 11.264 54.954666 4.096l130.730667-51.882667L245.76 268.629333c-11.605333-20.138667-3.072-47.104 17.408-54.272 10.922667-3.754667 24.234667-4.096 40.277333 4.437334 39.936 20.821333 203.776 155.989333 252.928 196.608 9.216 7.509333 20.138667 11.946667 31.402667 12.288h2.389333l180.224-71.338667c19.456-7.850667 40.618667-10.24 61.098667-6.826667 33.109333 5.461333 80.213333 23.210667 112.64 75.776z" fill="#635DF7" opacity=".7" p-id="6841"></path></svg>                      </div>
                      <div>
                        出差
                      </div>
                    </div>
                    <div class="icondiv">
                      <div>
                        <svg t="1664354574389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7952" width="20" height="20"><path d="M499.712 225.248v68.288h57.312V422.4h-51.808v51.424a338.88 338.88 0 0 1 124.448-83.328V293.504h60.032V225.248h-189.984z m-100.224 297.408c2.944-75.648 4.576-150.176 4.96-223.616h-58.944a2930.304 2930.304 0 0 1-5.504 218.112c19.456 0.736 39.296 2.56 59.488 5.504z m-55.616 69.92c-19.648 3.488-38.912 6.752-57.824 9.696V475.84h48.448v-67.2H286.048V295.712h52.832V227.424H161.024v68.288h56.736v112.896H163.776v67.2h53.984v136.32c-22.016 3.136-43.52 5.824-64.448 8l8.256 72.672 177.344-29.184c0.736-20.928 2.368-44.608 4.96-71.04z m80.384-133.824c0 99.488-31.008 175.68-93.056 228.576 20.192 15.424 39.648 31.744 58.368 48.992 8.096-7.872 15.68-16.128 22.816-24.64 0-1.696-0.256-3.328-0.256-4.992 0-81.952 29.056-157.056 77.408-215.68 0.256-6.72 0.768-13.248 0.768-20.16V199.904h-66.08v258.848z" p-id="7953" fill="#FFD2D2"></path><path d="M432.224 797.824H88.416a10.432 10.432 0 0 1-10.464-10.496V116.672c0-5.76 4.672-10.496 10.464-10.496h670.656c5.824 0 10.496 4.704 10.496 10.496v265.472a311.456 311.456 0 0 1 73.376 18.688v-284.16a83.84 83.84 0 0 0-83.872-83.84H88.416a83.84 83.84 0 0 0-83.84 83.84v670.656a83.84 83.84 0 0 0 83.84 83.872h380.96a315.712 315.712 0 0 1-37.152-73.376z" p-id="7954" fill="#FFD2D2"></path><path d="M659.68 695.424l39.904 77.376s64.864-157.184 167.104-209.568c-2.432 37.44-12.448 69.888 4.992 109.76-44.864 10.016-137.152 122.24-167.104 177.12-42.432-52.384-92.32-92.256-127.232-104.736l82.336-49.952z" p-id="7955" fill="#FFD2D2"></path><path d="M745.6 434.24a272.48 272.48 0 1 0 0 544.96 272.48 272.48 0 0 0 0-544.96z m0 471.584a199.104 199.104 0 1 1 0-398.24 199.136 199.136 0 0 1 0 398.24z" p-id="7956" fill="#FFD2D2"></path></svg>                     </div>
                      <div>
                        加班
                      </div>
                    </div>
                    <div class="icondiv">
                      <div>
                        <svg t="1667231671492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2141" width="22" height="22"><path d="M194.5 207h679.8c19.6 0 35.4-15.8 35.4-35.2 0-19.4-15.9-35.2-35.4-35.2H194.5c-19.6 0-35.4 15.7-35.4 35.2 0 19.5 15.8 35.2 35.4 35.2zM871.2 277.4H174.5c-21.5 0-38.9 17.3-38.9 38v408.8c0 86.2 79.7 163.2 170.6 163.2h448.2c87.3 0 155.3-72.4 155.3-163.2V315.4c0-20.7-17-38-38.5-38zM698.5 617.1c-0.1 0.9-0.2 1.9-0.3 2.8-0.1 0.3-0.1 0.6-0.2 0.9-0.1 0.6-0.2 1.2-0.4 1.8-0.1 0.4-0.2 0.7-0.3 1.1-0.2 0.5-0.3 1.1-0.5 1.6-0.1 0.4-0.3 0.7-0.4 1.1l-0.6 1.5c-0.2 0.4-0.3 0.7-0.5 1.1-0.2 0.5-0.5 0.9-0.7 1.4-0.2 0.4-0.4 0.7-0.6 1-0.3 0.4-0.5 0.9-0.8 1.3-0.2 0.3-0.5 0.6-0.7 1l-0.9 1.2c-0.2 0.3-0.5 0.6-0.8 0.9-0.3 0.4-0.7 0.7-1 1.1l-0.8 0.8c-0.4 0.3-0.7 0.7-1.1 1-0.3 0.3-0.6 0.5-0.9 0.8l-1.2 0.9c-0.3 0.2-0.6 0.4-0.9 0.7-0.4 0.3-0.9 0.5-1.3 0.8-0.3 0.2-0.6 0.4-1 0.6-0.5 0.3-1 0.5-1.4 0.7-0.3 0.2-0.6 0.3-1 0.4-0.5 0.2-1.1 0.4-1.7 0.6-0.3 0.1-0.6 0.2-0.8 0.3-0.9 0.3-1.7 0.4-2.6 0.6-1.5 0.4-3.3 0.9-5.1 0.9H446c-0.1 0-0.2 0.3-0.1 0.4l47.9 49.9c11.3 12.3 11.3 29 0.1 41.3-5.5 5.9-12.8 9.4-20.3 9.4-8 0-15-3-20.3-8.8l-96.6-104.7c-6.7-6.1-10-13.7-10-22.4 0-16.5 12.1-28.4 28.7-28.4H670c13.8 0 25.3 11 27.9 25.2 0.2 1 0.3 2.3 0.3 3.3v0.1c0 0.2 0.2 0.3 0.2 0.5 0.1 0.9 0.2 1.8 0.2 2.6l0.1 0.1c-0.1 0.6-0.1 1.6-0.2 2.6 0-0.1 0-0.1 0 0z m-28.6-81.6H375.1c-12.9 0-23.9-7.4-27.5-18.5-0.1-0.3-0.1-0.2-0.2-0.4-0.1-0.5-0.3-0.9-0.4-1.5-0.2-0.9 0-1.7-0.1-2.6-0.1-0.9 0.2-1.7 0.2-2.6v-0.1c0-0.8-0.3-1.7-0.2-2.5 0-0.2-0.1-0.3-0.1-0.5 0.1-0.7 0.1-1.3 0.2-2 0.1-0.3 0.1-0.6 0.2-0.9 0.1-0.5 0.2-1 0.4-1.5l0.3-0.9c0.2-0.5 0.3-0.9 0.5-1.4 0.1-0.3 0.3-0.6 0.4-1l0.6-1.2c0.2-0.3 0.3-0.6 0.5-0.9 0.2-0.4 0.4-0.8 0.7-1.2l0.6-0.9c0.3-0.4 0.5-0.7 0.8-1.1 0.2-0.3 0.5-0.6 0.7-0.9 0.3-0.3 0.6-0.7 0.9-1l0.8-0.8c0.3-0.3 0.7-0.6 1-0.9 0.3-0.3 0.6-0.5 0.8-0.7 0.3-0.3 0.7-0.6 1.1-0.8 0.3-0.2 0.6-0.4 0.9-0.7 0.4-0.3 0.8-0.5 1.2-0.8 0.3-0.2 0.6-0.4 1-0.6 0.4-0.2 0.9-0.5 1.3-0.7 0.3-0.2 0.6-0.3 1-0.5 0.5-0.2 0.9-0.4 1.4-0.6 0.3-0.1 0.6-0.3 1-0.4 0.5-0.2 1.1-0.3 1.7-0.5 0.3-0.1 0.6-0.2 0.8-0.3 0.9-0.2 1.7 0.2 2.6 0 1.5-0.3 3.3-0.3 5.1-0.3h224.2c0.2 0 0.2-0.8 0.1-0.9l-48-43.6c-11.3-10.8-11.3-25.3-0.1-36 5.5-5.2 12.9-8.2 20.3-8.2 8 0 15 2.6 20.3 7.6l96.7 91.1c6.7 5.3 10 10.9 10 18.4-0.2 14.5-12.3 23.8-28.9 23.8z" fill="#00F9E5" p-id="2142"></path></svg>
                      </div>
                        <div>
                        调休
                      </div>
                    </div>
                    <el-button size="small" @click="selectDateUp();selectDate('prev-month')">
                      上个月
                    </el-button>
                    <el-button size="small" @click="selectDate1();selectDate('today')">今天</el-button>
<!--                    <el-button size="small" @click="selectDateDown();selectDate('next-month')">-->
<!--                      下个月-->
<!--                    </el-button>-->
                  </el-button-group>
                </template>
                <template #date-cell="{ data }">
                  <div>{{ data.day.slice(8,10) }}</div>
                  <template v-for="p in date1.date">
                    <template v-if="data.day==p.day">
                      <svg v-if="p.age==1" t="1670071464365" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2714" width="18" height="20"><path d="M512 0C228.894118 0 0 228.894118 0 512s228.894118 512 512 512 512-228.894118 512-512S795.105882 0 512 0z m252.988235 355.388235L445.741176 671.623529c-6.023529 6.023529-15.058824 9.035294-21.082352 9.035295s-15.058824-3.011765-21.082353-9.035295l-144.564706-144.564705c-12.047059-12.047059-12.047059-30.117647 0-42.164706 12.047059-12.047059 30.117647-12.047059 42.164706 0l123.482353 123.482353 298.164705-298.164706c12.047059-12.047059 30.117647-12.047059 42.164706 0s12.047059 33.129412 0 45.17647z" p-id="2715" fill="#1AFA29"></path></svg>
                      <div style="display: flex">
                        <svg v-if="p.age==2 || p.age==3" t="1664354182033" class="tableicon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2993" width="20" height="20"><path d="M511.7952 88.1664c-253.3376 0-459.008 205.6704-459.008 459.008s205.6704 459.008 459.008 459.008 459.008-205.6704 459.008-459.008c0-254.1568-205.6704-459.008-459.008-459.008z m115.1488 544.5632H483.84c-31.2832 0-57.6-25.4976-57.6-57.6l41.0112-224.8192c0-31.2832 25.4976-57.6 57.6-57.6s57.6 25.4976 57.6 57.6l-30.1568 167.2704h74.7008c31.2832 0 57.6 25.4976 57.6 57.6-0.8704 31.232-26.368 57.5488-57.6512 57.5488z" p-id="2994" fill="#f4ea2a"></path><path d="M311.0912 59.392s-116.7872-92.1088-229.4784 0-28.7744 229.4784-28.7744 229.4784C135.0656 134.2464 311.0912 59.392 311.0912 59.392zM942.0288 59.392c-112.6912-92.1088-229.4784 0-229.4784 0s176.8448 74.8544 258.304 228.6592c-0.0512 0 83.8656-136.5504-28.8256-228.6592zM942.0288 59.392z" p-id="2995" fill="#f4ea2a"></path></svg>
                        <div v-if="p.age==2" style="line-height:16px;">迟到</div>
                        <div v-if="p.age==3" style="line-height: 16px;">早退</div>
                      </div>
                      <svg v-if="p.age==4" t="1670075023692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3041" width="20" height="20"><path d="M996.7104 909.5168V177.7664c0-57.6512-48.3328-104.5504-107.7248-104.5504h-64.0512v-10.1888c0-10.2912-15.6672-18.6368-35.072-18.6368-19.3536 0-35.072 8.3456-35.072 18.6368V73.216H222.7712v-10.1888c0-10.2912-15.7184-18.6368-35.072-18.6368s-35.072 8.3456-35.072 18.6368V73.216h-17.8688c-59.392 0-107.6736 46.8992-107.6736 103.424v731.7504c0 58.7264 48.3328 105.6256 107.7248 105.6256h754.176c59.4432 0.0512 107.776-46.848 107.7248-104.4992z m-304.4352-150.016c14.336 14.336 14.336 37.7856 0 52.0704-14.336 14.336-37.7856 14.336-52.0704 0l-128.256-128.256-128.256 128.256c-14.336 14.336-37.7856 14.336-52.0704 0-14.336-14.336-14.336-37.7856 0-52.0704l128.256-128.256-128.256-128.2048c-14.336-14.336-14.336-37.7856 0-52.0704 14.336-14.336 37.7856-14.336 52.0704 0l128.256 128.256 128.256-128.256c14.336-14.336 37.7856-14.336 52.0704 0 14.336 14.336 14.336 37.7856 0 52.0704L564.0192 631.296l128.256 128.2048z m222.5664-502.6816h-805.888v-50.6368h805.888v50.6368z" p-id="3042" fill="#d81e06"></path></svg>
                      <div style="display: flex">
                        <div v-if="p.age==11">上班补卡成功</div>
                        <div v-if="p.age==12">下班补卡成功</div>
                      </div>
                      <div style="display: flex">
                      <svg v-if="p.age==6 || p.age==5" t="1666573406465" class="icon" viewBox="0 0 1122 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2643" width="20" height="20"><path d="M112.219178 126.246575h897.753425c61.720548 0 112.219178 50.49863 112.219178 112.219178v673.315069c0 61.720548-50.49863 112.219178-112.219178 112.219178H112.219178c-61.720548 0-112.219178-50.49863-112.219178-112.219178V238.465753c0-61.720548 50.49863-112.219178 112.219178-112.219178z" fill="#2F77F1" p-id="2644"></path><path d="M771.506849 252.493151c-15.430137 0-28.054795-12.624658-28.054794-28.054795V28.054795c0-15.430137 12.624658-28.054795 28.054794-28.054795s28.054795 12.624658 28.054795 28.054795v196.383561c0 15.430137-12.624658 28.054795-28.054795 28.054795z m5.610959 218.827397c11.221918 11.221918 11.221918 29.457534 0 39.276712l-252.49315 252.493151c-2.805479 2.805479-5.610959 4.208219-9.819179 5.610959-11.221918 4.208219-22.443836 2.805479-30.860274-5.610959l-140.273972-140.273973c-11.221918-11.221918-11.221918-29.457534 0-39.276712 11.221918-11.221918 28.054795-11.221918 39.276712 0l120.635617 120.635616 232.854794-232.854794c12.624658-11.221918 29.457534-11.221918 40.679452 0zM350.684932 252.493151c-15.430137 0-28.054795-12.624658-28.054795-28.054795V28.054795c0-15.430137 12.624658-28.054795 28.054795-28.054795s28.054795 12.624658 28.054794 28.054795v196.383561c0 15.430137-12.624658 28.054795-28.054794 28.054795z" fill="#AFFCFE" p-id="2645"></path></svg>                        <svg v-if="p.age==7" t="1664354429260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5779" width="20" height="20"><path d="M376.6784 726.4768c0-33.4848 5.2224-65.792 15.104-96.1536 9.8816-30.8736 24.4224-58.7776 42.1888-84.48 18.3808-25.8048 39.5264-48.3328 64.5632-68.2496 24.32-20.0704 52.0704-35.584 81.7152-47.6672 2.048-4.5568 3.2768-9.0624 6.0416-16.2304l4.5056-12.3392c0.6656-3.84 2.048-7.68 3.2768-10.8544 6.0416-2.048 11.264-5.2224 16.3328-9.7792 4.5568-3.84 8.4992-9.728 12.4928-16.7424 3.2768-7.1168 6.0416-17.4592 7.2704-29.6448 0.6656-9.0624 0.6656-16.7424-0.6656-23.1936-1.9456-6.4512-3.2768-11.52-6.0416-15.5136-2.6112-4.5568-6.0416-8.3968-9.8816-11.008 0-23.9104-2.048-47.104-4.5056-69.632-3.2768-20.0704-7.8336-41.216-15.104-63.1808-6.6048-21.9648-17.8688-42.5984-32.9728-60.5696-6.6048-7.68-15.7696-16.2304-26.9312-23.9104-11.264-7.68-24.32-14.848-38.7072-21.2992-14.5408-5.7856-30.208-10.9568-46.6944-14.848-16.3328-3.84-32.9728-5.888-49.9712-5.888-13.1584 0-26.9312 1.2288-41.472 3.2768-14.5408 1.9456-28.9792 5.7856-43.52 11.52-14.5408 5.7856-28.9792 14.1312-42.1376 23.9104-13.2096 9.728-25.7024 22.6816-37.4784 38.7072-11.8272 16.7424-21.1456 35.584-26.9312 56.7296-6.0416 21.2992-9.8816 41.216-12.4928 59.3408-2.048 21.9648-3.2768 43.264-3.2768 65.0752-5.2224 5.888-8.4992 11.52-11.264 17.9712-2.6112 6.4512-4.5568 13.568-5.2224 21.2992-0.6656 7.68 0.6656 16.7424 3.2768 26.5216 2.6112 10.2912 6.6048 17.4592 10.5984 22.6816 3.9936 5.2224 7.8336 9.728 11.264 12.3392 4.5568 2.6112 8.4992 4.5056 12.4928 5.888 2.6112 9.0624 6.0416 17.9712 8.4992 26.5216 2.6112 7.68 6.0416 14.848 9.8816 21.9648 3.2768 7.1168 7.8336 12.9024 12.4928 16.7424 9.8816 8.3968 19.0976 16.2304 26.9312 23.9104 7.8336 7.68 12.4928 18.7904 13.8752 31.5904 0.6656 9.7792 0.6656 17.4592 0.6656 25.1392 0 7.168-2.048 14.1312-4.5568 21.2992-3.2768 7.168-7.8336 14.1312-14.5408 21.2992-6.7072 7.1168-15.7696 14.1312-28.416 21.9648-9.8816 6.4512-21.7088 11.52-34.2016 16.1792-12.4928 4.5568-25.7024 8.3968-38.8608 12.3392-13.8752 3.84-26.9312 7.68-39.5776 11.52-12.4928 4.5568-24.32 9.728-34.8672 16.2304-10.5984 7.168-19.7632 14.848-26.9312 23.9104-7.2704 9.0624-11.8272 20.5824-14.5408 34.7648-6.0416 37.376-7.2704 67.6864-3.9936 91.4432 3.2768 23.9104 7.8336 38.0416 14.5408 42.5984 3.9936 2.6112 12.4928 5.888 25.7024 8.3968 13.2096 2.6112 29.6448 5.888 48.7424 8.3968 19.7632 3.2768 40.8064 5.888 64.5632 8.3968 23.6032 2.6112 47.5136 5.2224 71.1168 7.168 24.4224 1.9456 47.5136 3.1744 69.888 4.4032 22.3744 1.2288 42.1888 2.048 59.3408 2.048h23.1936c-13.8752-23.9104-25.1392-49.7152-32.9728-76.7488-7.8336-27.4432-11.8272-55.8592-11.8272-85.5552z m0 0" p-id="5780" fill="#d4237a"></path><path d="M959.3856 623.36c-14.5408-32.9728-34.2016-61.2352-59.3408-86.3744-24.9856-24.4224-53.9648-43.8272-87.5008-57.9584-33.6384-14.1312-69.0688-21.2992-107.4176-21.2992-38.1952 0-74.4448 7.1168-107.9296 21.2992-33.6384 14.1312-62.6176 33.4848-87.5008 57.9584-24.9856 24.4224-44.7488 53.5552-59.3408 86.3744-14.5408 32.9728-21.7088 67.6864-21.7088 105.0624s7.2704 72.2432 21.7088 105.0624c14.5408 32.9728 34.2016 61.2352 59.3408 86.3744 24.9856 24.4224 53.9648 43.8272 87.5008 57.9584 33.6384 14.1312 69.888 21.2992 107.9296 21.2992 38.0416 0 73.728-7.1168 107.4176-21.2992 33.6384-14.1312 62.6176-33.4848 87.5008-57.9584 25.1392-24.4224 44.7488-53.5552 59.3408-86.3744 14.5408-32.9728 21.7088-67.6864 21.7088-105.0624 0-37.2224-7.2704-72.0896-21.7088-105.0624z m-178.4832 224.8192c-10.5984 0-21.1456-4.096-29.1328-12.0832l-82.1248-82.432c-7.424-7.2704-12.0832-17.7152-12.0832-28.9792v-164.4032c0-22.784 18.3808-41.0624 41.0624-41.0624 22.6816 0 41.0624 18.3808 41.0624 41.0624v147.5072l70.1952 70.1952c16.0768 16.0768 16.0768 42.0352 0 58.112-7.9872 7.936-18.432 12.0832-28.9792 12.0832z m0 0" p-id="5781" fill="#d4237a"></path></svg>
                        <div v-if="p.age==5">上班漏签</div>
                        <div v-if="p.age==6">下班漏签</div>
                      </div>
                        <svg v-if="p.age==8" t="1664354509001" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6839" width="20" height="20"><path d="M201.728 776.192c0-20.138667 16.384-36.522667 36.522667-36.522667h547.84c20.138667 0 36.522667 16.384 36.522666 36.181334 0 20.138667-16.384 36.522667-36.522666 36.522666H238.250667c-20.138667 0-36.522667-16.384-36.522667-36.181333z" fill="#635DF7" opacity=".7" p-id="6840"></path><path d="M201.728 776.192c0-20.138667 16.384-36.522667 36.522667-36.522667h547.84c20.138667 0 36.522667 16.384 36.522666 36.181334 0 20.138667-16.384 36.522667-36.522666 36.522666H238.250667c-20.138667 0-36.522667-16.384-36.522667-36.181333zM944.128 425.301333c9.216 14.677333 2.730667 35.157333-12.629333 39.936L279.210667 680.96c-26.624 8.874667-55.296 1.024-74.752-20.138667l-123.221334-132.096c-10.922667-11.605333-3.754667-32.085333 11.264-32.768l19.797334-1.024c10.24-0.341333 20.821333 2.048 29.696 7.168L221.866667 547.84c16.725333 9.557333 36.864 11.264 54.954666 4.096l130.730667-51.882667L245.76 268.629333c-11.605333-20.138667-3.072-47.104 17.408-54.272 10.922667-3.754667 24.234667-4.096 40.277333 4.437334 39.936 20.821333 203.776 155.989333 252.928 196.608 9.216 7.509333 20.138667 11.946667 31.402667 12.288h2.389333l180.224-71.338667c19.456-7.850667 40.618667-10.24 61.098667-6.826667 33.109333 5.461333 80.213333 23.210667 112.64 75.776z" fill="#635DF7" opacity=".7" p-id="6841"></path></svg>
                        <svg v-if="p.age==9" t="1664354574389" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7952" width="20" height="20"><path d="M499.712 225.248v68.288h57.312V422.4h-51.808v51.424a338.88 338.88 0 0 1 124.448-83.328V293.504h60.032V225.248h-189.984z m-100.224 297.408c2.944-75.648 4.576-150.176 4.96-223.616h-58.944a2930.304 2930.304 0 0 1-5.504 218.112c19.456 0.736 39.296 2.56 59.488 5.504z m-55.616 69.92c-19.648 3.488-38.912 6.752-57.824 9.696V475.84h48.448v-67.2H286.048V295.712h52.832V227.424H161.024v68.288h56.736v112.896H163.776v67.2h53.984v136.32c-22.016 3.136-43.52 5.824-64.448 8l8.256 72.672 177.344-29.184c0.736-20.928 2.368-44.608 4.96-71.04z m80.384-133.824c0 99.488-31.008 175.68-93.056 228.576 20.192 15.424 39.648 31.744 58.368 48.992 8.096-7.872 15.68-16.128 22.816-24.64 0-1.696-0.256-3.328-0.256-4.992 0-81.952 29.056-157.056 77.408-215.68 0.256-6.72 0.768-13.248 0.768-20.16V199.904h-66.08v258.848z" p-id="7953" fill="#FFD2D2"></path><path d="M432.224 797.824H88.416a10.432 10.432 0 0 1-10.464-10.496V116.672c0-5.76 4.672-10.496 10.464-10.496h670.656c5.824 0 10.496 4.704 10.496 10.496v265.472a311.456 311.456 0 0 1 73.376 18.688v-284.16a83.84 83.84 0 0 0-83.872-83.84H88.416a83.84 83.84 0 0 0-83.84 83.84v670.656a83.84 83.84 0 0 0 83.84 83.872h380.96a315.712 315.712 0 0 1-37.152-73.376z" p-id="7954" fill="#FFD2D2"></path><path d="M659.68 695.424l39.904 77.376s64.864-157.184 167.104-209.568c-2.432 37.44-12.448 69.888 4.992 109.76-44.864 10.016-137.152 122.24-167.104 177.12-42.432-52.384-92.32-92.256-127.232-104.736l82.336-49.952z" p-id="7955" fill="#FFD2D2"></path><path d="M745.6 434.24a272.48 272.48 0 1 0 0 544.96 272.48 272.48 0 0 0 0-544.96z m0 471.584a199.104 199.104 0 1 1 0-398.24 199.136 199.136 0 0 1 0 398.24z" p-id="7956" fill="#FFD2D2"></path></svg>
                        <svg v-if="p.age==10" t="1667231671492" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2141" width="22" height="22"><path d="M194.5 207h679.8c19.6 0 35.4-15.8 35.4-35.2 0-19.4-15.9-35.2-35.4-35.2H194.5c-19.6 0-35.4 15.7-35.4 35.2 0 19.5 15.8 35.2 35.4 35.2zM871.2 277.4H174.5c-21.5 0-38.9 17.3-38.9 38v408.8c0 86.2 79.7 163.2 170.6 163.2h448.2c87.3 0 155.3-72.4 155.3-163.2V315.4c0-20.7-17-38-38.5-38zM698.5 617.1c-0.1 0.9-0.2 1.9-0.3 2.8-0.1 0.3-0.1 0.6-0.2 0.9-0.1 0.6-0.2 1.2-0.4 1.8-0.1 0.4-0.2 0.7-0.3 1.1-0.2 0.5-0.3 1.1-0.5 1.6-0.1 0.4-0.3 0.7-0.4 1.1l-0.6 1.5c-0.2 0.4-0.3 0.7-0.5 1.1-0.2 0.5-0.5 0.9-0.7 1.4-0.2 0.4-0.4 0.7-0.6 1-0.3 0.4-0.5 0.9-0.8 1.3-0.2 0.3-0.5 0.6-0.7 1l-0.9 1.2c-0.2 0.3-0.5 0.6-0.8 0.9-0.3 0.4-0.7 0.7-1 1.1l-0.8 0.8c-0.4 0.3-0.7 0.7-1.1 1-0.3 0.3-0.6 0.5-0.9 0.8l-1.2 0.9c-0.3 0.2-0.6 0.4-0.9 0.7-0.4 0.3-0.9 0.5-1.3 0.8-0.3 0.2-0.6 0.4-1 0.6-0.5 0.3-1 0.5-1.4 0.7-0.3 0.2-0.6 0.3-1 0.4-0.5 0.2-1.1 0.4-1.7 0.6-0.3 0.1-0.6 0.2-0.8 0.3-0.9 0.3-1.7 0.4-2.6 0.6-1.5 0.4-3.3 0.9-5.1 0.9H446c-0.1 0-0.2 0.3-0.1 0.4l47.9 49.9c11.3 12.3 11.3 29 0.1 41.3-5.5 5.9-12.8 9.4-20.3 9.4-8 0-15-3-20.3-8.8l-96.6-104.7c-6.7-6.1-10-13.7-10-22.4 0-16.5 12.1-28.4 28.7-28.4H670c13.8 0 25.3 11 27.9 25.2 0.2 1 0.3 2.3 0.3 3.3v0.1c0 0.2 0.2 0.3 0.2 0.5 0.1 0.9 0.2 1.8 0.2 2.6l0.1 0.1c-0.1 0.6-0.1 1.6-0.2 2.6 0-0.1 0-0.1 0 0z m-28.6-81.6H375.1c-12.9 0-23.9-7.4-27.5-18.5-0.1-0.3-0.1-0.2-0.2-0.4-0.1-0.5-0.3-0.9-0.4-1.5-0.2-0.9 0-1.7-0.1-2.6-0.1-0.9 0.2-1.7 0.2-2.6v-0.1c0-0.8-0.3-1.7-0.2-2.5 0-0.2-0.1-0.3-0.1-0.5 0.1-0.7 0.1-1.3 0.2-2 0.1-0.3 0.1-0.6 0.2-0.9 0.1-0.5 0.2-1 0.4-1.5l0.3-0.9c0.2-0.5 0.3-0.9 0.5-1.4 0.1-0.3 0.3-0.6 0.4-1l0.6-1.2c0.2-0.3 0.3-0.6 0.5-0.9 0.2-0.4 0.4-0.8 0.7-1.2l0.6-0.9c0.3-0.4 0.5-0.7 0.8-1.1 0.2-0.3 0.5-0.6 0.7-0.9 0.3-0.3 0.6-0.7 0.9-1l0.8-0.8c0.3-0.3 0.7-0.6 1-0.9 0.3-0.3 0.6-0.5 0.8-0.7 0.3-0.3 0.7-0.6 1.1-0.8 0.3-0.2 0.6-0.4 0.9-0.7 0.4-0.3 0.8-0.5 1.2-0.8 0.3-0.2 0.6-0.4 1-0.6 0.4-0.2 0.9-0.5 1.3-0.7 0.3-0.2 0.6-0.3 1-0.5 0.5-0.2 0.9-0.4 1.4-0.6 0.3-0.1 0.6-0.3 1-0.4 0.5-0.2 1.1-0.3 1.7-0.5 0.3-0.1 0.6-0.2 0.8-0.3 0.9-0.2 1.7 0.2 2.6 0 1.5-0.3 3.3-0.3 5.1-0.3h224.2c0.2 0 0.2-0.8 0.1-0.9l-48-43.6c-11.3-10.8-11.3-25.3-0.1-36 5.5-5.2 12.9-8.2 20.3-8.2 8 0 15 2.6 20.3 7.6l96.7 91.1c6.7 5.3 10 10.9 10 18.4-0.2 14.5-12.3 23.8-28.9 23.8z" fill="#00F9E5" p-id="2142"></path></svg>
                    </template>
                  </template>
                </template>
              </el-calendar>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  </el-scrollbar>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {onBeforeMount, onMounted} from "@vue/runtime-core";
import * as echarts from "echarts";
import {useStore} from "vuex";
import moment from "moment"
import axios from "axios";
const store =useStore()//状态管理器
let empCard=store.state.user.sysEmployee.empCard;
//日历判断图标
const date1=reactive({
  date:[
  ]
})
const getIconList=(date,userNo,type)=>{
  axios.post("checkOa/attendance/icon/"+date+"/"+userNo+"/"+type).then((res)=>{
    date1.date=res.data.data
  })
}
//获取当前时间并格式化
let tt=new Date()
let str = ref(moment(tt).format('YYYY 年 MM 月'))
//人员组织搜索框
const input2 = ref('');
//上一个月
const selectDateUp=()=>{
  tt.setMonth(tt.getMonth(),0);
  console.log(tt.getMonth()+1)
  str.value=moment(tt).format('YYYY 年 MM 月')
  getTableData(moment(tt).format('YYYY-MM'),empCard);//上个月请假信息
  if(tt.getMonth()+1==new Date().getMonth()+1){
    getAll(moment(tt).format('YYYY-MM-DD'),1,empCard)//月all
    getIconList(moment(tt).format('YYYY-MM-DD'),empCard,1)//图标
  }
  getAll(moment(tt).format('YYYY-MM-DD'),0,empCard)//月all
  getIconList(moment(tt).format('YYYY-MM-DD'),empCard,0)//图标
}
//下一个月
const selectDateDown=()=>{
  tt.setMonth(tt.getMonth()+2,0);
  console.log(tt.getMonth()+1)
  console.log(new Date().getMonth()+1)
  str.value=moment(tt).format('YYYY 年 MM 月')
  getTableData(moment(tt).format('YYYY-MM'),empCard);//下个月请假集合
  if(tt.getMonth()+1==new Date().getMonth()+1){
    getAll(moment(tt).format('YYYY-MM-DD'),1,empCard)//月al
    getIconList(moment(tt).format('YYYY-MM-DD'),empCard,1)//图标
  }
  getAll(moment(tt).format('YYYY-MM-DD'),0,empCard)//月al
  getIconList(moment(tt).format('YYYY-MM-DD'),empCard,0)//图标
}
//本月
const selectDate1=()=>{
  tt=new Date()
  console.log(tt.getMonth()+1)
  str.value=moment(new Date()).format('YYYY 年 MM 月')
  getTableData(moment(new Date()).format('YYYY-MM'),empCard);//本月请假集合
  getAll(moment(new Date()).format('YYYY-MM-DD'),1,empCard)//月al
  getIconList(moment(new Date()).format('YYYY-MM-DD'),empCard,1)//图标
}
//日历
const calendar = ref()
const selectDate = (val: string) => {
  calendar.value.selectDate(val)
}
//tabs默认选中第一个
const activeName="floor"
//部门人员树tree
interface Tree {
  label: string
  children?: Tree[]
}
const lateNum=ref(0)//迟到次数
const bigLateNum=ref(0)//严重迟到次数
const earlyNum=ref(0)//早退次数
const bigEarlyNum=ref(0)//严重早退次数
const tripDaynum=ref(0)//出差天数
const holiDaynum=ref(0)//请假天数
const overDaynum=ref(0)//加班小时
const attendanceDays=ref(0)//实际出勤天数
const holiDayType=ref([]);//假期额度
const qk=ref(0)//缺卡次数
const kg=ref(0);//旷工
const sjatten=ref(0)//应出勤天数
//假期额度
const getHoliDayType=()=>{
  axios.post("checkOa/holiType/query/"+empCard).then((res)=>{
    holiDayType.value=res.data.data
  })
}
//本月请假list集合
const getTableData=(data,emp)=>{
  axios.post("checkOa/replace/query/"+empCard+"/"+data).then((res)=>{
  tableData.value=res.data.data
  })
}
onBeforeMount(function (){
  //假期额度
  getHoliDayType();
  //本月补卡信息
  getTableData(moment(new Date()).format('YYYY-MM'),empCard);
})
const handleNodeClick = (data: Tree) => {
  console.log(data)
}
const tableData =ref([])
//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts = reactive({});
const defaultProps = {
  children: 'children',
  label: 'label',
}
let person=reactive({})
let son=ref();
const getperson=()=>{
  axios.post("checkOa/attendance/person/"+1+"/"+1+"/"+1).then((res)=> {
    person.value=res.data.data
    son=res.data.data
  })
  }
const getAll=(data,type,emp)=>{
  axios.post("checkOa/trip/query/"+data+"/"+emp+"/"+type).then((res)=>{
    const d=res.data.data
    lateNum.value=d.lates
    bigLateNum.value=d.lates2
    earlyNum.value=d.earlies
    bigEarlyNum.value=d.earlies2
    tripDaynum.value=d.businessTripAps
    holiDaynum.value=d.holidayAps
    qk.value=d.qk
    kg.value=d.kg
    sjatten.value=d.sjatten
    if(d.overtimeAps!=null){
      overDaynum.value=d.overtimeAps
    }
    attendanceDays.value=d.attendanceDays
    let option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          y:'10%',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '15',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: sjatten.value, name: sjatten.value+'应出勤天数' },
          ]
        }
      ]
    };
    //初始化echarts实例方法
    const init = ()=>{
      //3.初始化container容器
      myEcharts= echarts.init(chart.value);
      //5.传入数据
      myEcharts.setOption(option);
      //additional：图表大小自适应窗口大小变化
      window.onresize = ()=>{
        myEcharts.resize();
      }
    }
    init();
  })
}
const getAll2=(data)=>{
  empCard=data
  getAll(moment(new Date()).format('YYYY-MM-DD'),1,empCard);
  getTableData(moment(new Date()).format('YYYY-MM'),empCard);//本月补卡集合
  console.log(moment(new Date()).format('YYYY-MM-DD'))
  console.log(moment(tt).format('YYYY-MM-DD'))
  let i;
  if(moment(new Date()).format('YYYY-MM-DD')===moment(tt).format('YYYY-MM-DD')){
    i=1;
  }else{
    i=0;
  }
  console.log(empCard)
  getIconList(moment(tt).format('YYYY-MM-DD'),empCard,i)//图标
}
//onMounted钩子函数
onMounted(()=>{
  //获取当月all
  getAll(moment(new Date()).format('YYYY-MM-DD'),1,empCard);
  getIconList(moment(new Date()).format('YYYY-MM-DD'),empCard,1);
  getperson();
})
const sou=()=>{
  let data=[];
  for (let i=0;i<son.length;i++){
    if(son[i].empCard.indexOf(input2.value.toUpperCase())!=-1){
      data.push(son[i])
    }
  }
  person.value=data
}
</script>

<style>
svg{
  margin-right: 5px;
}
#container{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0 auto;
}
.nian{
  padding:4px 30px 4px 20px;
  display: flex
}
.nian div{
  margin: 10px ;
}
.tian{
  width: 50%;
  text-align: center;
}
.biao{
  padding: 10px;border-bottom: 1px solid #1a1a1a;
}
.el-calendar__header{
  padding: 12px 0px;
}
.jia{
  display: flex;
  justify-content: center;
  margin: 40px 10px 20px 20px;
}
.zi{
  text-align: center;line-height: 100px;width: 100px
}
.cc{
  width: 30%;
  padding: 5px 5px;
}
.cc div{
  text-align: center;
  padding: 18px 0px;
}
.el-tabs__header{
  margin: 0px;
}
.el-tabs__nav{
  margin-left: 30px;
  padding: 6px 5px;
}
.el-tabs__item{
  font-size: 16px;
}
.hotitle{
  background: #DCEFF8;
  padding: 10px 12px;
  /*width: 350px;*/
}
.ho{
  padding: 12px 12px;
  font-size: 14px;
  display: flex;
}
.hodiv{
  padding: 20px 3px;
  height: 300px;
}
.hodivvcount{
  width: 50px;flex:1;text-align: right
}
.el-button-group{
  display: flex;
  justify-content: flex-start;
}
.you{
  display: flex;padding: 12px 12px;
  font-size: 14px;
}
.handsome{
  display: flex;margin-top: 15px
}
.icondiv{
  display: flex;margin: 0px 10px 0px 0px;
}
.tableicon{
  margin-right: 5px;
}
.el-tabs__active-bar{
  margin-left: 30px;
}
.el-menu{
  border: none;
}
.el-menu-item{
  text-align: center;
}
</style>